<!DOCTYPE html>
<html>

<head>
    <title>优酷首页</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!--网站头部-->
    <div class="index-header-box">
        <div class="header-container clear">
            <a class="logo" href="#" title="优酷"></a>
            <ul class="header-nav">
                <li class="current"><a href="#">首页</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">会员</a></li>
                <li><a href="#">订阅</a></li>
                <li><a href="#">我的</a></li>
            </ul>
            <div class="list">
                <a href="" class="login user-handle"><span class="icon1 icon-commonsty"></span>登录</a>
            </div>
            <div class="handle">
                <a href="" class="record user-handle"><span class="icon2 icon-commonsty"></span><span class="icon5"></span></a>
            </div>
            <div class="handle">
                <a href="" class="record user-handle"><span class="icon3 icon-commonsty"></span><span class="icon5"></span></a>
            </div>
            <div class="handle">
                <a href="" class="record user-handle"><span class="icon4 icon-commonsty"></span><span class="icon5"></span></a>
            </div>
            <div class="searchBox">
                <div class="searchArea">
                    <span class="search-icon"></span>
                    <input type="text" name="search-input" class="search-input">
                    <a href="#" title="优酷指数排行榜"></a>
                </div>
                <button type="submit">搜库</button>
            </div>
        </div>
    </div>
    <!--网站头部导航-->
    <div class="index-top-nav">
        <div class="top-nav-content clear">
            <ul class="top-nav-main">
                <li class="current "><a href="#">首页</a></li>
                <li><a href="#">电视剧</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">综艺</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">来疯</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">片库</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">拍客</a></li>
                <li><a href="#">纪实</a></li>
                <li><a href="#">公益</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">原创</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">搞笑</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">亲子</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">游戏</a></li>
            </ul>
            <div class="top-nav-more">
                <span>更多 <i class="icon6"></i></span>
            </div>
            <div class="top-nav-right">
                <div class="top-nav-down">
                    <a href="#" title="下载">下载</a>
                </div>
            </div>
        </div>
    </div>
    <div class="index-body">
        <!--首页最上方的推荐版块-->
        <div class="top-recommend public-container clear">
            <ul>
                <li class="bimg">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span style="font-size: 16px;">麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /><span>麻雀，全网最快更新</span></a>
                </li>
            </ul>
        </div>
        <!--每月热播-->
        <div class="hotPlay public-container clear">
            <div class="body-header clear">
                <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/1.png" class="icon" /><a href="#">看大剧热综抢双11红包<span></span>></a><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/ad1.png" class="ads" />
            </div>
            <ul>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/2.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/2.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/2.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/2.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/2.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/2.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
            </ul>
        </div>
        <!--优酷懂你-->
        <div class="understand public-container clear">
            <div class="understand-left">
                <div class="body-header clear">
                    <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/2.png" class="icon" /><a href="#">优酷懂你</a>
                    <a href="#"></a>
                </div>
                <ul>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新.麻雀，全网最快更新.麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                    <li class="">
                        <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.jpg" /></a>
                        <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                    </li>
                </ul>
            </div>
            <div class="understand-right">
                <div class="body-header products clear">
                    <a href="#">产品大全<span></span>></a>
                </div>
                <div class="allproducts">
                    <ul class="productslist">
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                        <li>
                            <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/7.png">
                            <dl>
                                <dt><a href="#">来疯</a></dt>
                                <dd><a href="#">热门主播</a><a href="#">来疯App</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--剧集-->
        <div class="drama public-container clear">
            <div class="body-header clear">
                <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/3.png" class="icon" /><a href="#">剧集<span></span>></a>
            </div>
            <ul>
                <li class="first">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
            </ul>
        </div>
        <!--放剧场-->
        <div class="theater public-container clear">
            <div class="body-header clear">
                <img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/4.png" class="icon" /><a href="#">放剧场<span></span>></a>
            </div>
            <ul>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
                <li class="">
                    <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/450/dco6xqd5/111.jpg" /></a>
                    <a href="#" class="video-name">麻雀，全网最快更新</a><span class="des">麻雀，全网最快更新</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="index-footer public-container">
        <dl class="f1">
            <dt>
                <a href="#">合一集团</a>
                <a href="#">关于优酷</a>
                <a href="#">关于土豆</a>
            </dt>
            <dd>
                <a href="#">Youku Tudou Inc.</a>
                <a href="#">Youku.com</a>
                <a href="#">Tudou.com</a>
            </dd>
            <dd>
                <a href="#">友情链接</a>
                <a href="#">工作机会</a>
                <a href="#">广告服务</a>
            </dd>
        </dl>
        <dl class="f2">
            <dt>优酷热门</dt>
            <dd>
                <a href="#">剧集</a>
                <a href="#">电影</a>
                <a href="#">综艺</a>
                <a href="#">音乐</a>
                <a href="#">少儿</a>
                <a href="#">资讯</a>
                <a href="#">拍客</a>
                <a href="#">纪实</a>
                <a href="#">公益</a>
            </dd>
            <dd>
                <a href="#">体育</a>
                <a href="#">汽车</a>
                <a href="#">科技</a>
                <a href="#">财经</a>
                <a href="#">娱乐</a>
                <a href="#">原创</a>
                <a href="#">动漫</a>
                <a href="#">搞笑</a>
                <a href="#">旅游</a>
            </dd>
            <dd>
                <a href="#">体育</a>
                <a href="#">汽车</a>
                <a href="#">科技</a>
                <a href="#">财经</a>
                <a href="#">娱乐</a>
                <a href="#">原创</a>
                <a href="#">动漫</a>
            </dd>
        </dl>
        <dl class="f3">
            <dt>产品中心</dt>
            <dd>
                <a href="#">PC客户端</a>
                <a href="#">优酷iDo</a>
            </dd>
            <dd>
                <a href="#">PC客户端</a>
                <a href="#">优酷iDo</a>
            </dd>
            <dd>
                <a href="#">PC客户端</a>
                <a href="#">优酷iDo</a>
            </dd>
        </dl>
        <dl class="f4">
            <dt>用户</dt>
            <dd>
                <a href="#">自频道加油站</a>
                <a href="#">原创认证</a>
                <a href="#">视频创收</a>
            </dd>
            <dt>支持</dt>
            <dd>
                <a href="#">自频道加油站</a>
                <a href="#">原创认证</a>
                <a href="#">视频创收</a>
            </dd>
        </dl>
        <div class="hr"></div>
        <dl class="f1">
            <dd><a href="#">网络文化经营许可证 京网文[2014]0934-236号</a></dd>
            <dd><a href="#">京卫网审[2013]第0209号 </a> <a href="#">网络110报警服务</a></dd>
            <dd> 药品服务许可证(京)-经营-2015-0029</dd>
            <dd>节目制作经营许可证京字670号</dd>
        </dl>
        <dl class="f2">
            <dd>请使用者仔细阅读优酷使用协议、版权声明、反盗版盗链声明</a>
            </dd>
            <dd>Copyright©2016 优酷 youku.com 版权所有</dd>
            <dd>不良信息举报电话: 4008100580</dd>
            <dd><a href="#">信息网络传播视听节目许可证0108283号</a></dd>
        </dl>
        <dl class="f3">
            <dd><a href="#">京ICP证060288号</a></dd>
            <dd><a href="#">新出网证(京)字160号</a></dd>
            <dd><a href="#">北京互联网举报中心</a></dd>
            <dd><a href="#">北京12318文化市场举报热线</a></dd>
        </dl>
        <dl class="f4">
            <a href="#" class=" two-bar-codes"></a>
        </dl>
        <div class="report">
            <a href="#">经营性网站<br/>备案信息</a>
            <a href="#">经营性网站<br/>备案信息</a>
            <a href="#">经营性网站<br/>备案信息</a>
            <a href="#">经营性网站<br/>备案信息</a>
            <a href="#">经营性网站<br/>备案信息</a>
            <a href="#">经营性网站<br/>备案信息</a>
            <a href="#">经营性网站<br/>备案信息</a>
        </div>
    </div>
</body>

</html>
